iT邦幫忙

DAY 26
1

建立API為中心的輕量級網站系列 第 26

knockout.js + 顏色選擇器 改變程式碼底色

  • 分享至 

  • xImage
  •  

前篇 為程式碼上色的不同主題顏色,
會因為底色固定,而使得一些顏色主題不明顯,
而加上可以即時改變程式碼背景色的功能。
顏色選擇器採用 Really Simple Color Picker in jQuery 這工具,
並利用 knockout.js 可以偵測改變 css/style 屬性的功能,
改變程式碼區塊的底色。

先單獨頁面測試 knockout.js 加這顏色選擇器的功能,
把顏色選擇器畫出來,需用input元件,
其值由 knockout.js 來綁定:

<input id="picker" data-bind="value:myRGB" />

再用JS語法給做出來,

$('#picker').colorPicker();

只要一個可以被偵測myRGB的屬性,
透過選擇器改變,就同時改變指定的div的顏色屬性,
所以這個實作網頁呈現是這個樣子:

完整程式碼:

<div id="color" data-bind="style:{ backgroundColor: myRGB }">
<h1>鐵人五twtw</h1>
</div>
RGB:<span data-bind="text:myRGB" /></span><br />
<input id="picker" data-bind="value:myRGB" />

<script src="/js/knockout.js" type="text/javascript"></script>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/jquery.colorPicker.js" type="text/javascript"></script>
<script type="text/javascript">
  $('#picker').colorPicker();
  var viewModel = function() {
    var self = this;
    self.myRGB = ko.observable('#99CC00');
  };
  ko.applyBindings(new viewModel());
</script>

這實作的網址在:http://i5.tagbible.net/colorpicker

把這成功的測試改應用到為程式碼上色的網頁,
幾乎與上面要加的程式碼相同,
就不再重覆說明。
只有幾個顏色主題因有指定背景顏色,
會造成自行改選背景顏色沒作用。

系列文章列表


上一篇
knockout.js + redis 實作為程式碼上色的線上工具
下一篇
用 knockout.js 實作簡單的分頁功能
系列文
建立API為中心的輕量級網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言